﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
    <script type="text/javascript" src="scripts/jq.js"></script>
    <script type="text/javascript">
    function cctv(){
       alert('开始了');
    }
    ///By Aaron
    ///遮照效果|black|White
var background = {
    show: function() {//显示遮罩层 显示时候这个最早，hide时候这个最晚
        if (!$('#backgroundlayer').length) {
            var ele = $('<div style="position:absolute; left:0; top:0; background-color:#000;text-align:center; vertical-align:middle" id="backgroundlayer"></div>');//回调后处理掉loading界面
            var bodyer = document.getElementsByTagName('body')[0];
            var height = parseInt(bodyer.scrollHeight) > parseInt(bodyer.clientHeight) ? bodyer.scrollHeight : bodyer.clientHeight;
            var width = parseInt(bodyer.scrollWidht) > parseInt(bodyer.clientWidth) ? bodyer.scrollWidht : bodyer.clientWidth;
            ele.css("width", width + "px").css("height", height + "px").css("opacity", 0.75).appendTo("body");
        } else {
            $('#backgroundlayer').show();//css('display', '');
        }
    },
    hide: function() {//隐藏遮罩层
        if ($('#backgroundlayer').length) {
            $('#backgroundlayer').hide();//css('display', 'none');
        }
    },
    load:function(type,url,data,callback,erro,beforesend)//外部载入
    {
      
       $.ajax({
           type:type,
           url:url,
           data:data,
           success:function(obj){callback.call(this,obj);},
           erro:function(xml,status,e){},
           beforesend:null
       })
    
    },
    loading: function() {//loading过程中
        background.show();
        if (!$('#backgroundloadinglayer').length){
            $('#backgroundlayer').html('<div id="backgroundloadinglayer" style="height:30px; line-height:30px; display:inline; background-color:#fff; position:absolute"><img src="images/loading.gif" /> 加载中，请稍候...</div>');
            
        }else{
            $('#backgroundlayer').show();//css('display', '');
        }
        background.setPositon(document.getElementsByTagName('body')[0],$('#backgroundloadinglayer'),300);
        
    },
    loaded: function() {//load完成
        if ($('#backgroundloadinglayer').length>0) {
           $('#backgroundlayer').hide();//.css('display', 'none');
        }
    },
    setPositon:function(body,ele,top){//设置元素坐标，参数分别为body,当前节点，距顶边距
               var scrollTop = document.documentElement ? document.documentElement.scrollTop : body.scrollTop;
               var scrollLeft = document.documentElement ? document.documentElement.scrollLeft : body.scrollLeft;
               scrollLeft = (parseInt(body.clientWidth) / 2) - ele.width()/2;              
               scrollTop += top;
               scrollTop += 'px';
               scrollLeft += 'px';
               ele.css('left', scrollLeft);
               ele.css('top', scrollTop);
               
    },
    msgbox: {//对话框，目前还没有完善，只有normal版，整体而言包括提示信息，回调函数，处理时间，以及对话框版本 如alert,msg,confirm==
        Init: function() {//初始化
            background.show();
            var body = document.getElementsByTagName('body')[0]; //获取原生对象          
            if (arguments.length < 3) {
                alert('invalied paramters');
            }
            if (arguments.length == 3) {
            if(!$('#msgbox').length>0)
            {
                //simple msg,just for redirecting
                var ele = $('<div id="msgbox"></div>');               
                ele.css('border', '1px #000 solid');
                ele.css('padding', '12px');
                ele.css('position', 'absolute');              
                ele.css('background-color', '#fff');
                ele.css('overflow', 'visible');
                ele.html(arguments[0]);                        
                ele.appendTo($('body'));
                ele=null;
                ele=$('#msgbox');              
               $('<div onclick="background.msgbox.close()" align="right">close</div>').appendTo(ele);
               ele=null;
             }else{
               $('#msgbox').show();
             }
               background.setPositon(body,$('#msgbox'),200);               
               setTimeout(arguments[1], arguments[2]);             

            } else {
                switch (arguments[0]) {//以后要扩展的各个类型
                    case 'Alert': (function() { })(); break;
                    case 'Confirm': (function() { })(); break;
                    case 'msg': (function() { })(); break;
                    default: (function() { })(); break
                }
            }
        },
        close:function(){//关闭对话
        if($('#msgbox').length>0)
        {
         $('#msgbox').hide();//css('display','none');
         background.hide(); 
        }
      }
    }
}



    </script>
    <script type="text/javascript">
    function show(msg)
    {
        background.msgbox.Init(msg,function(){/*your call back*/},2000);
    }
    function csdn()
    {
        //alert('cctv');
        background.load('get','source.htm',null,show,alert);
    }
    </script>
    <style type="text/css">
        .style1
        {
            width: 97%;
            height: 956px;
        }
        .style2
        {
            height: 103px;
        }
    </style>
</head>
<body>

    <table class="style1">
        <tr>
            <td>
                1</td>
            <td onclick="background.show()" >
                showbackground</td>
            <td>
                s</td>
            <td>
                &nbsp;</td>
            <td onclick="background.loading()">
                showmsgbox&nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                1</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                2</td>
            <td onclick="csdn()" style="cursor:pointer">
                </td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                3&nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td class="style2">
            </td>
            <td class="style2">
            </td>
            <td class="style2">
            </td>
            <td class="style2">
                4</td>
            <td class="style2">
            </td>
            <td class="style2">
            </td>
            <td class="style2">
            </td>
            <td class="style2">
            </td>
            <td class="style2">
            </td>
            <td class="style2">
            </td>
            <td class="style2">
            </td>
            <td class="style2">
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
             <td onclick="csdn()" style="cursor:pointer">
                Ajaxload</td>
            <td>
                &nbsp;</td>
            <td>
                5</td>
          <td></td>
            <td>
                &nbsp;</td>
            <td>
                8</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                6</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                7</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                8</td>
            <td>
                8</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                8</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                9</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                1</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                1</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                1</td>
            <td>
                1</td>
            <td>
                1</td>
            <td>
                &nbsp;</td>
            <td>
                1</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                1</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                1</td>
        </tr>
    </table>

</body>
</html>
